<template>
    <view class="page">
        <status-bar title="选择地区"></status-bar>
        <city-select @cityClick="cityClick" :formatName="formatName" :activeCity="activeCity" :hotCity="hotCity" :obtainCitys="obtainCitys" :isSearch="true" ref="citys"></city-select>
    </view>
</template>

<script>
    import citySelect from '@/components/city-select/city-select.vue';
    import { mapMutations } from 'vuex';
    export default {
        components: {
            citySelect
        },
        data() {
            return {
                //需要构建索引参数的名称（注意：传递的对象里面必须要有这个名称的参数）
                formatName: 'title',
                //当前城市
                activeCity: '',
                //热门城市
                hotCity: '',
                //显示的城市数据
                obtainCitys: []
            };
        },
        onLoad() {
            this.formatName = 'cityName';
            this.activeCity = {
                cityName: uni.getStorageSync('city'),
                cityCode: 110100
            };
            this.hotCity = [
                { cityName: '重庆', cityCode: 110100 },
                { cityName: '上海', cityCode: 110100 },
                { cityName: '北京', cityCode: 110102 },
                { cityName: '天津', cityCode: 110100 },
                { cityName: '南京', cityCode: 110100 },
                { cityName: '呼和浩特市', cityCode: 110102 }
            ];
            uni.request({
                url: 'https://imgcdn.mogoie.com/json/citys.json',
                success: (res) => {
                    this.obtainCitys = res.data;
                }
            });
        },
        methods: {
            ...mapMutations(['changeCity']),
            cityClick(item) {
                uni.setStorageSync('city', item.cityName);
                this.changeCity(item.cityName);
                this.$common.back();
            }
        }
    };
</script>

<style lang="scss" scoped></style>
